<template>
  <!-- 硬件终端 - 新增/编辑 -->
  <div class="terminalYJ">
    <el-dialog :title="detailTitle" :visible.sync="detailDialog" :before-close="closePlay" class="detailDialog" :close-on-click-modal="false">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="2.1rem" class="demo-ruleForm">
        <el-form-item label="硬件终端名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="硬件终端类别" prop="hardwareType">
          <el-select v-model="ruleForm.hardwareType" placeholder="请选择" class="searchItem">
            <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="硬件终端登录密码" prop="secret">
          <el-input v-model="ruleForm.secret" />
        </el-form-item>
        <el-form-item label="硬件终端IP地址" prop="ip">
          <el-input v-model="ruleForm.ip" />
        </el-form-item>
        <el-form-item label="硬件终端部署位置" prop="address">
          <el-input v-model="ruleForm.address" />
        </el-form-item>
        <el-form-item label="硬件终端编号" prop="code">
          <el-input v-model="ruleForm.code" />
        </el-form-item>
        <el-form-item label="硬件终端管理人员" prop="manager">
          <el-input v-model="ruleForm.manager" />
        </el-form-item>
        <el-form-item class="footer">
          <el-button v-if="detailTitle=='终端注册'" type="primary" @click="submitForm('ruleForm', 'add')">注册</el-button>
          <el-button v-else type="primary" @click="submitForm('ruleForm', 'edit')">保存</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { bus } from '@/main'

export default {
  name: 'TerminalYJ',
  data() {
    return {
      options: [],
      ruleForm: {
        name: '',         // 硬件终端名称
        hardwareType: '', // 硬件终端类别
        secret: '',       // 硬件终端登录密码
        ip: '',           // 硬件终端IP地址
        address: '',      // 硬件终端部署位置
        code: '',         // 硬件终端编号
        manager: ''       // 硬件终端管理人员
      },
      rules: {
        name: [
          { required: true, message: '请输入硬件终端名称', trigger: 'change' }
        ],
        hardwareType: [
          { required: true, message: '请输入硬件终端类别', trigger: 'change' }
        ],
        secret: [
          { required: true, message: '请输入硬件终端IP地址', trigger: 'change' }
        ],
        ip: [
          { required: true, message: '请输入硬件终端IP地址', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入硬件终端部署位置', trigger: 'change' }
        ],
        code: [
          { required: true, message: '请输入硬件终端编号', trigger: 'change' }
        ],
        manager: [
          { required: true, message: '请输入硬件终端管理人员', trigger: 'change' }
        ]
      },
      detailDialog: false,  // 弹窗开关
      detailTitle: '',      // 弹窗标题（新增/编辑）
      status: false,        // 离开页面时，判断是否确认离开
      editData: ''          // 深拷贝父级接收的数据，用作编辑终端（防止从父级接收的数据在编辑时被修改，导致无法重置）
    }
  },
  methods: {
    // 获取数据
    getData(data) {
      this.name = data.name
      this.detailDialog = data.open
      this.detailTitle = data.title
      this.editData = JSON.parse(JSON.stringify(data))
      // 请求终端类型
      this.$api.getHardwareType().then((response) => {
        if (response.data.status == 1) {
          this.options = response.data.data
        }
      })
      if (data.data.id) {
        this.ruleForm = {
          name: this.editData.data.name,
          hardwareType: this.editData.data.hardwareType,
          secret: this.editData.data.secret,
          id: this.editData.data.id,
          ip: this.editData.data.ip,
          address: this.editData.data.address,
          code: this.editData.data.code,
          manager: this.editData.data.manager
        }
      }
    },
    // 提交 / 保存
    submitForm(formName, key) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (key == 'add') {
            this.$api.registerHardware(this.ruleForm).then((response) => {
              if (response.data.status == 1) {
                this.$message.success(response.data.msg)
                this.status = true
                this.detailDialog = false
                bus.$emit('refreshHardware')
              } else {
                this.$message.error(response.data.msg)
              }
            })
          } else if (key == 'edit') {
            this.$api.updatehardwareList(this.ruleForm).then((response) => {
              if (response.data.status == 1) {
                this.$message.success(response.data.msg)
                this.status = true
                this.detailDialog = false
                bus.$emit('refreshHardware')
              } else {
                this.$message.error(response.data.msg)
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
      if (this.editData) {
        this.ruleForm = {
          name: this.editData.data.name,
          hardwareType: this.editData.data.hardwareType,
          secret: this.editData.data.secret,
          id: this.editData.data.id,
          ip: this.editData.data.ip,
          address: this.editData.data.address,
          code: this.editData.data.code,
          manager: this.editData.data.manager
        }
      } else {
        this.ruleForm = {
          name: '',
          hardwareType: '',
          secret: '',
          ip: '',
          address: '',
          code: '',
          manager: ''
        }
      }
    },
    // 关闭弹窗
    closePlay() {
      if (this.status) {
        this.ruleForm = {
          name: '',
          hardwareType: '',
          secret: '',
          ip: '',
          address: '',
          code: '',
          manager: ''
        },
        this.detailTitle = '终端注册'
        this.detailDialog = false
      } else {
        this.detailDialog = true
        this.$confirm('是否放弃当前修改内容?', '提示', {
          confirmButtonText: '放弃修改',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.ruleForm = {
            name: '',
            hardwareType: '',
            secret: '',
            ip: '',
            address: '',
            code: '',
            manager: ''
          },
          this.editData = ''
          this.$refs.ruleForm.resetFields()
          this.detailDialog = false
        }).catch(() => {
          this.detailDialog = true
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.terminalYJ {
  width: 100%;
  >>>.el-dialog{
    overflow: hidden;
    border-radius: 0.05rem;
    * {
      font-size: 0.16rem;
    }
    .el-dialog__header {
      background: #536FEA;
      padding: 0 0.2rem;
      height: 0.55rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-dialog__title, .el-dialog__close {
        color: #fff;
        font-size: 0.2rem !important;
      }
      .el-dialog__headerbtn {
        position: static;
      }
    }
    .el-dialog__body {
      padding: 0.15rem 0.2rem;
      .el-upload__tip {
        color:red;
        width:78%;
        margin: 0 auto;
        line-height: 0.2rem;
      }
      .el-form {
        .el-form-item__label {
          font-size: 0.16rem;
        }
      }
    }
    .el-dialog__footer {
      padding: 0 0.2rem 0.2rem;
    }
  }
  >>>.el-form {
    .footer {
      text-align: right;
    }
  }
}
</style>
